<template>
	<view class="calendar">
		<view class="" style="padding: 0 30rpx;box-sizing: border-box;color: #DC5551;" v-if="backDateTime.date">
			<text>出发日期：{{backDateTime.date}}</text>
		</view>
		<view class="week">
			<view class="week-item" :style="'color:'+ item.color +';'" v-for="(item,index) in weekList" :key="index">
				<text>{{item.title}}</text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="calendar-content">
			<view class="day-list">
				<view class="day-item" v-for="(item,index) in days" :key="index">
					<view class="day-item-title">
						<text class="item-year">{{item.yearMonth || ''}}</text>
						<text class="item-text">{{index === 0 && mode === 'ticket' ? '根据订票规则您只可预订三天后出发的航班' : '' }}</text>
					</view>
					<view class="day-item-content">
						<view class="day-item-child" v-for="(items,indexs) in item.days" :key="indexs" :class="{'day-item-child-xz' : select.index == index && select.indexs == indexs}" :style="select.index == index && select.indexs == indexs? '' : 'color:'+ items.color +';'" @click="bindDayDataTap(items,index,indexs)">
							<text>{{items.today ? '今天' : items.dayNumber}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"m-calendar1",
		props:{
			monthNumber:{ /* 获取本月后几个月*/
				type:Number,
				default:3
			},
			// isBack:{
			// 	type:Boolean,
			// 	default:false
			// },
			backDateTime:{
				type:Object,
				default:{
					time:'',
					date:''
				}
			},
			mode:{
				type:String,
				default:'ticket'
			}
		},
		data() {
			return {
				weekList:[{
					title:'日',
					color:'#DC5551'
				},
				{
					title:'一',
					color:'#000000'
				},
				{
					title:'二',
					color:'#000000'
				},
				{
					title:'三',
					color:'#000000'
				},
				{
					title:'四',
					color:'#000000'
				},
				{
					title:'五',
					color:'#000000'
				},
				{
					title:'六',
					color:'#DC5551'
				}],
				today: parseInt(new Date().getDate()), //今天
				month: parseInt(new Date().getMonth()+1), //本月
				year: parseInt(new Date().getFullYear()), //本年
				days:[],
				select:false,
				currentDate:{
					day: parseInt(new Date().getDate()), 
					month: parseInt(new Date().getMonth() + 1), 
					year: parseInt(new Date().getFullYear())
				}
			}
		},
		created() {
			this.handleCalendar(this.monthNumber);
		},
		methods: {
			// 获取当月共多少天
			getThisMonthDays(year, month) {
				return new Date(year,month,0).getDate()
			},
			// 获取当月第一天星期几
			getFirstDayOfWeek(year, month) {
				return new Date(year+'-' +month).getDay();
			},
			// 计算当月1号前空了几个格子，把它填充在days数组的前面
			calculateEmptyGrids(year, month) {
				//计算每个月时要清零
				let dateNull = [];
				// this.days = [];
				const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
				if (firstDayOfWeek > 0) {
					for (let i = 1; i <= firstDayOfWeek; i++) {
						var obj = {
							day: false,
							isSign: false
						}
						dateNull.push(obj);
					}
				}
				return dateNull;
			},
			// 绘制当月天数占的格子，并把它放到days数组中
			calculateDays(year, month) {
				let date = [];
				const thisMonthDays = this.getThisMonthDays(year, month);
				for (let i = 1; i <= thisMonthDays; i++) {
					var obj = {
						date: i,
						isSign: false
					}
					date.push(this.getDateInfo(year, month,i));
				}
				return date;
			},
			/* 获取当前日期对应数据 */
			getDateInfo(year, month,day){
				let data = {};
				data.day = day < 10 ? '0'+ day : day;
				data.month =  month;
				data.monthText = month > 10 ? month :'0' + month;
				data.dayNumber =  day;
				data.year = year;
				data.date = year + '-' + (month > 10 ? month :'0' + month) + '-' + data.day;
				data.time = new Date(data.date).getTime();
				// console.log(data.date,data.time,11)
				data.backstageTime = new Date(data.date).getTime() / 1000;
				data.today = false;
				data.color = '#000000';
				let week = new Date(data.date).getDay();
				data.week = this.weekList[week].title;
				let currentTime = new Date(this.currentDate.year + '-' + (this.currentDate.month > 10 ? this.currentDate.month :'0' + this.currentDate.month) + '-' +this.currentDate.day).getTime();
				// console.log(currentTime,22)
				if(data.time == currentTime){
					data.today = true;
					data.color = '#000000';
				}
				if(data.time < this.getDateStr(3).time && data.time != currentTime && this.mode === 'ticket'){
					data.color = '#C1C1C1';
				}
				if(data.time < currentTime && this.mode !== 'ticket'){
					data.color = '#C1C1C1';
				}
				return data
			},
			/* 获取后面几个月的时间数据 */
			async handleCalendar(monthNumber) {
				let _this = this,
					month = this.month,
					year = this.year,
					date = [];
				this.select = false;
				for(let i = 0; i <= monthNumber; i++){
					let item = {
						yearMonth:'',
						days:[]
					}
					item.yearMonth = year + '年' + month + '月';
					if(_this.calculateEmptyGrids(year, (month > 10 ? month :'0' + month)).length > 0){
						 await _this.calculateEmptyGrids(year, (month > 10 ? month :'0' + month)).forEach(items=>{
							item.days.push(items)
						})
						await _this.calculateDays(year, month).forEach(items=>{
							item.days.push(items)
						})
					}else{
						await _this.calculateDays(year, month).forEach(items=>{
							item.days.push(items)
						})
					}
					date.push(item);
					if (month == 12) {
						year ++;
						month = 1;
					}else{
						month ++;
					}
				}
				this.days = date;
			},
			/* 获取前几日和后几日 */
			getDateStr(AddDayCount) {
			    var dd = new Date();
			    dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
			    var y = dd.getFullYear();
			    var m = dd.getMonth()+1;//获取当前月份的日期
			    var d = dd.getDate();
				var data = {
					time : new Date(y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)).getTime(),
					date : y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)
				}
			    return data;
			},
			/* 点击返回时间数据 */
			bindDayDataTap(item,index,indexs){
				if(!item.day){
					return false	
				}
				// console.log(item,11)
				if((item.time < this.getDateStr(3).time) && this.mode === 'ticket'){
					return false
				}
				if((item.time < this.getDateStr(0).time) && this.mode !== 'ticket'){
					return false
				}
				if(item.time < this.backDateTime.time){
					uni.$u.toast('返回日期不能小于出发日期');
					return false
				}
				this.select = {
					index:index,
					indexs:indexs
				};
				this.$emit('currentDate', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
.calendar{
	width: 100%;
	background-color: #FFF;
	.week{
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #E3E3E3;
		.week-item{
			width: calc(100%/7);
			height: 98rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
	}
	.calendar-content{
		width: 100%;
		height: 800rpx;
		.day-list{
			padding: 0 30rpx;
			box-sizing: border-box;
			padding-top: 15rpx;
			.day-item{
				width: 100%;
				.day-item-title{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding: 20rpx 0;
					.item-year{
						font-size: 42rpx;
						color: #000000;
						font-weight: bold;
					}
					.item-text{
						font-weight: 400;
						font-size: 22rpx;
						color: #C6C6C6;
					}
				}
				.day-item-content{
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					.day-item-child{
						display: flex;
						justify-content: center;
						align-items: center;
						width: calc(100%/7);
						height: 98rpx;
						font-weight: bold;
						font-size: 32rpx;
						border-radius: 10rpx;
						color: #000;
					}
					.day-item-child-xz{
						color: #fff;
						background-color: #DC5551;
					}
				}
			}
		}
	}
}
</style>
